import React, { Component } from "react"
import { observer, inject } from "mobx-react"
import { Link, withRouter } from "react-router-dom"
import cssModules from "react-css-modules"
import { Row, Col } from "antd"
import { toJS } from "mobx"
import moment from "moment"
import ScreenModal from "../ScreenModal"
import ModalContent from "./components/ModalContent"

import styles from "./index.less"
import Dashboard from "./components/Dashboard"

@inject("ScreenStore")
@observer
@cssModules(styles)
class Overview extends Component {
  constructor(props) {
    super(props)

    this.store = this.props.ScreenStore
  }
  componentWillMount() {
    const { getLoad } = this.store

    getLoad()
  }
  handleClick = () => {
    const {
      confim,
      getLoadChart,
      getRelayModuleInfo,
      getFsuControlInfo,
    } = this.store
    confim("overview-modal")
    getRelayModuleInfo()
    getFsuControlInfo()
    getLoadChart()
  }
  render() {
    const Item = (props) => {
      const { name, limit, unit = "", value } = props
      return (
        <Row
          type="flex"
          justify="space-between"
          className={styles["load-ratio"]}
          align="top"
        >
          <Col span={7}>
            <div className={styles["ratio-title"]}>
              <span>{name || "无"}</span>
            </div>
          </Col>
          <Col span={17}>
            <div className={styles["ratio-value"]}>
              <span
                className={styles["chart-ratio"]}
                style={{ width: `${(value / limit) * 100}%` }}
              />
            </div>

            <div className={styles["chart-value"]}>{`${value} ${
              unit ? unit : ""
            }/${limit} ${unit ? unit : ""}`}</div>
          </Col>
        </Row>
      )
    }
    const { loadData, fsuInfo } = this.store
    let data = (loadData && loadData.loads) || []
    let sum = loadData.sumLoad || {}

    const diffDay = moment(new Date()).diff(moment(fsuInfo.createTime), "days")
    return (
      <div styleName="overview-container">
        <div styleName={"title-container"}>
          <div styleName={"title-selected"} />
          <div styleName={"title"}>运行总览</div>
        </div>
        <div styleName={"dashboard-wrap"}>
          <Dashboard
            value={sum && sum.value}
            unit={sum && sum.unit}
            diffDay={diffDay}
            limit={sum && sum.upperLimit}
          />
        </div>
        <div styleName={"more"} onClick={this.handleClick} />
        <div styleName={"load-ratio-wrap"}>
          <div styleName={"load-ratio-border"}>
            <span styleName={"first"} />
            <span styleName={"second"} />
            <span styleName={"third"} />
            <span styleName={"fourth"} />
          </div>
          {_.map(data, (item, i) => {
            return (
              <Item
                key={i.toString(36) + i}
                name={item.spName}
                value={item.value}
                unit={item.unit}
                limit={5}
              />
            )
          })}
        </div>
        <ScreenModal
          type={"overview-modal"}
          className={styles["overview-modal"]}
          title={"运行总览"}
        >
          <ModalContent />
        </ScreenModal>
      </div>
    )
  }
}

export default Overview
